<template>
  <div >
    <!-- 搜索条件 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="报表日期">
              <a-range-picker @change="onChange" v-model="timeValue"/>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons" >
              <a-button type="primary" icon="search" @click='loadData'>查询</a-button>
              <a-button type="primary" style="margin-left: 8px"  icon="reload" @click='reload'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">-->
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
<!--    </div>-->

    <a-table
      :row-key="record => record.id"
      ref="table"
      size="middle"
      bordered
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      @change="handleTableChange"
      :loading="loading"
    >
   <span slot="action" slot-scope="text, record">
     <a @click='handleEdit(record.id,record.beginDate)'> 编辑 </a>
                <a-divider type='vertical' />
            <a @click='handleDetail(record)'>办理详情</a>
          </span>

    </a-table>
    <handle-detail-modal ref='handleModal'></handle-detail-modal>
  </div>
</template>

<script>

import ReportsEpidemicWeeklyService from '@/myService/ReportsEpidemicWeeklyService'
import HandleDetailModal from '@views/data-governance/smart-reports/epidemic-weekly/components/HandleDetailModal'


export default {
  components: {
    HandleDetailModal
  },
  data () {
    return {
      timeValue:undefined,
      // 查询参数
      queryParam: {
        beginDate:'',
        endDate:'',
        pageSize: 10,
        pageIndex:1,
      },
      /* 数据源 */
      dataSource:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '开始日期',
          dataIndex: 'beginDate',
          align: 'center',
        },
        {
          title: '结束日期',
          dataIndex: 'endDate',
          align: 'center',
        },
        {
          title: '工单数',
          align:'center',
          dataIndex: 'total',
        },
        {
          title: '环比',
          align:'center',
          dataIndex: 'annulus',
        },
        {
          title: '办结率',
          align:'center',
          dataIndex: 'completionRate',
        },
        {
          title: '操作',
          key: 'action',
          align:'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      /* table加载状态 */
      loading:false,
      // 加载数据方法 必须为 Promise 对象
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true;
      this.dataSource=[]
      this.ipagination.total=0
      this.queryParam.pageSize=this.ipagination.pageSize
      this.queryParam.pageIndex=this.ipagination.current
      console.log(this.queryParam)
      ReportsEpidemicWeeklyService.getPeriodStatistics(this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records||res.result;
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    reload(){
      this.queryParam={
        beginDate:'',
        endDate:'',
        pageSize: 10,
        pageIndex:1,
      }
      this.ipagination.pageSize=10;
      this.ipagination.current=1;
      this.timeValue=undefined;
      this.loadData();
    },
    onChange(date, dateString) {
      this.queryParam.beginDate=dateString[0].replace(/-/g, "")
      this.queryParam.endDate=dateString[1].replace(/-/g, "")
    },
    handleAdd(){
      this.$router.push("/report/handle-epidemic-weekly-add")
    },
    handleTableChange(pagination){
      this.ipagination.current = pagination.current;
      this.ipagination.pageSize = pagination.pageSize;
      this.loadData();
    },
    handleDetail(row){
      this.$refs.handleModal.open(row.id)
    },
    handleEdit(periodId,beginDate){
      beginDate=beginDate.replace(/-/g,'')
      this.$router.push({path:'/report/handle-epidemic-weekly-add',query:{"beginDate":beginDate,"periodId":periodId}})
    }
  },
}
</script>